<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const customerId = route.params.id;

// 模拟客户数据（实际应从API获取）
const customer = ref({
  id: customerId,
  name: '腾讯科技',
  logo: 'https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png',
  industry: '信息技术',
  website: 'www.tencent.com',
  location: '深圳市南山区',
  createDate: '2022-01-15',
  responsible: '张经理',
  lastUpdate: '2023-06-15',
  type: '重点客户',
  status: '活跃',
  valueScore: 92,
  totalOrder: '¥1,234,567',
  avgDealCycle: '45天',
  potentialValue: '¥280,000'
});

// 联系人数据
const contacts = ref([
  {
    id: 1,
    name: '李经理',
    position: '采购总监',
    phone: '13800138001',
    email: 'li@example.com'
  },
  {
    id: 2,
    name: '王工程师',
    position: '技术主管',
    phone: '13900139002',
    email: 'wang@example.com'
  }
]);

// 最近活动
const activities = ref([
  {
    id: 1,
    type: 'call',
    title: '电话沟通云服务器采购需求',
    time: '2023-06-15',
    user: '李销售',
    content: '客户表示有意向增加3台高配云服务器，需要详细报价方案。'
  },
  {
    id: 2,
    type: 'meeting',
    title: '现场产品演示',
    time: '2023-06-10',
    user: '张经理',
    content: '成功进行了产品现场演示，客户反馈良好，期待进一步报价。'
  },
  {
    id: 3,
    type: 'email',
    title: '发送解决方案文档',
    time: '2023-06-05',
    user: '技术支持',
    content: '根据客户需求整理了详细的解决方案文档，客户已确认收到。'
  }
]);

// 返回客户列表
const goBack = () => {
  router.push('/customers');
};
</script>

<template>
  <div class="customer-detail">
    <!-- 头部 -->
    <div class="page-header">
      <div class="back-button">
        <el-button @click="goBack" icon="Back" text>返回列表</el-button>
      </div>
      <div class="header-content">
        <h1 class="page-title">{{ customer.name }}</h1>
        <span class="status-tag success">{{ customer.type }}</span>
      </div>
    </div>
    
    <!-- 客户概览 -->
    <div class="card">
      <div class="card-body">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="customer-logo">
              <img :src="customer.logo" alt="Customer Logo">
            </div>
          </el-col>
          <el-col :span="12">
            <h3 class="section-title">基本信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">客户ID:</span>
                <span class="info-value">{{ customer.id }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">网站:</span>
                <span class="info-value">{{ customer.website }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">地区:</span>
                <span class="info-value">{{ customer.location }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">创建日期:</span>
                <span class="info-value">{{ customer.createDate }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">负责人:</span>
                <span class="info-value">{{ customer.responsible }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">最近更新:</span>
                <span class="info-value">{{ customer.lastUpdate }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="action-buttons">
              <el-button type="primary">
                <el-icon><Edit /></el-icon>
                编辑客户
              </el-button>
              <el-button>
                <el-icon><Plus /></el-icon>
                添加销售机会
              </el-button>
            </div>
          </el-col>
        </el-row>
        
        <!-- 客户价值 -->
        <el-row :gutter="20" class="customer-value-row">
          <el-col :span="6">
            <div class="value-card">
              <div class="value-title">客户价值分</div>
              <div class="value-number">{{ customer.valueScore }}</div>
              <div class="progress-container">
                <div class="progress-bar primary" :style="{width: customer.valueScore + '%'}"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="value-card">
              <div class="value-title">历史订单总额</div>
              <div class="value-number">{{ customer.totalOrder }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="value-card">
              <div class="value-title">平均成交周期</div>
              <div class="value-number">{{ customer.avgDealCycle }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="value-card">
              <div class="value-title">在谈机会金额</div>
              <div class="value-number">{{ customer.potentialValue }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <!-- 标签页选项卡 -->
    <div class="card">
      <div class="card-body">
        <el-tabs>
          <el-tab-pane label="概览">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="section-block">
                  <div class="section-header">
                    <h3 class="section-title">联系人</h3>
                    <el-button size="small" plain>
                      <el-icon><Plus /></el-icon>
                      添加联系人
                    </el-button>
                  </div>
                  <el-table :data="contacts" border style="width: 100%">
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="position" label="职位" />
                    <el-table-column prop="phone" label="电话" />
                    <el-table-column prop="email" label="邮箱" />
                  </el-table>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="section-block">
                  <div class="section-header">
                    <h3 class="section-title">最近活动</h3>
                    <el-button size="small" plain>
                      <el-icon><Plus /></el-icon>
                      添加活动
                    </el-button>
                  </div>
                  <ul class="activity-list">
                    <li v-for="activity in activities" :key="activity.id" class="activity-item">
                      <div class="activity-icon primary">
                        <el-icon v-if="activity.type === 'call'"><Phone /></el-icon>
                        <el-icon v-else-if="activity.type === 'meeting'"><Grid /></el-icon>
                        <el-icon v-else><Message /></el-icon>
                      </div>
                      <div class="activity-content">
                        <div class="activity-title">{{ activity.title }}</div>
                        <div class="activity-meta">
                          <span class="activity-time">{{ activity.time }}</span>
                          <span class="activity-user">{{ activity.user }}</span>
                        </div>
                        <div class="activity-desc">{{ activity.content }}</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="联系人"></el-tab-pane>
          <el-tab-pane label="互动历史"></el-tab-pane>
          <el-tab-pane label="销售机会"></el-tab-pane>
          <el-tab-pane label="订单历史"></el-tab-pane>
          <el-tab-pane label="服务工单"></el-tab-pane>
          <el-tab-pane label="文档资料"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-header {
  margin-bottom: 20px;
}

.back-button {
  margin-bottom: 10px;
}

.header-content {
  display: flex;
  align-items: center;
}

.page-title {
  margin: 0;
  margin-right: 12px;
}

.customer-logo {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  padding: 15px;
}

.customer-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.section-title {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-item {
  display: flex;
}

.info-label {
  color: var(--text-secondary);
  margin-right: 8px;
  min-width: 80px;
}

.info-value {
  color: var(--text-primary);
  font-weight: 500;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: center;
}

.customer-value-row {
  margin-top: 25px;
}

.value-card {
  background-color: var(--bg-light);
  border-radius: var(--border-radius);
  padding: 15px;
  text-align: center;
}

.value-title {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 5px;
}

.value-number {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
}

.section-block {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-list {
  max-height: 400px;
  overflow-y: auto;
}

.activity-desc {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 13px;
}
</style> 